import React, { Component, createRef } from 'react'
import echarts from 'echarts'
import {Statistic, Row, Col, Tabs, List, Typography} from 'antd'
import { getChinaChartsData, getGlobalChartsData } from '../../api/charts'
// import 'echarts/map/js/province/xianggang.js'
import 'echarts/map/js/china.js'
import 'echarts/map/js/world.js'
// import IO from 'socket.io/client-dist/socket.io.min.js'

const dictionary = {
  nowConfirm: '现有确诊',
  noInfect: '无症状',
  suspect: '现有疑似',
  nowSevere: '现有重症',
  confirm: '累计确诊',
  importedCase: '境外输入',
  heal: '累计治愈',
  dead: '累计死亡',
}

const randomColor = () => '#' + Math.random().toString(16).slice(-6)

export default class Dashboard extends Component {
  state = {
    chinaTotal: {},
    chinaAdd: {},
    listData: []
  }

  // 引用 echarts 容器DOM元素
  echartsChinaRef = createRef()
  echartsGlobalRef = createRef()

  io = null
  componentWillUnmount() {
    // 销毁 socket.io 资源
    // this.io.disconnect()

    // 销毁 websocket 资源
    this.io.close()
  }

  async componentDidMount() {
    // WebSocket 连接服务器
    this.io = new WebSocket('ws://10.7.171.52:3000')
    // 接收数据
    this.io.onmessage = event => {
      console.log('event:', event)
      this.setState({
        listData: JSON.parse(event.data).slice(-10)
      })
    }

    // // socket.io 连接服务器，实现实时通信
    // this.io = IO('ws://localhost:3000')
    // // 注册 message 事件，用于接收服务器端发送的消息
    // this.io.on('message', msg => {
    //   console.log('接收到：', msg)
    //   this.setState({
    //     listData: msg.list.slice(-10)
    //   })
    // })

    // getGlobalChartsData().then(res => console.log('国际：', res))
    // 获取数据
    const p1 = getChinaChartsData()
    const p2 = getGlobalChartsData()
    const chartsData = await p1
    let globalData = await p2
    // const chartsData = JSON.parse(resData.data.data)
    // 统计数据
    const {chinaTotal, chinaAdd} = chartsData
    this.setState({
      chinaTotal,
      chinaAdd
    })
    // 构建地图渲染的数据
    const chinaData = chartsData.areaTree[0].children.map(province => {
      return {
        name: province.name,
        value: province.total.nowConfirm
      }
    })
    globalData = globalData.foreignList.map(country => {
      return {
        name: country.name,
        value: country.nowConfirm
      }
    })
    // console.log('疫情数据：', chartsData)

    // 创建 echarts 实例
    const chinaChart = echarts.init(this.echartsChinaRef.current)
    // 配置选项
    const chinaOption = {
      title: { // 标题
        text: '最新国内疫情地图',
        subtext: '数据来源于腾讯接口',
        sublink: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5'
      },
      tooltip: { // 提示
        trigger: 'item',
        formatter: '{b}<br/>{c}'
      },
      visualMap: { // 视觉效果
        type: 'piecewise', // 分段型
        pieces: [ // 每一段的范围及样式
          {gte: 10000, color: '#ff0000'},
          {gte: 1000, lte: 9999, color: '#ff0000', colorAlpha: 0.8},
          {gte: 100, lte: 999, color: '#ff0000', colorAlpha: 0.6},
          {gte: 10, lte: 99, color: '#ff0000', colorAlpha: 0.4},
          {gte: 1, lte: 9, color: '#ff0000', colorAlpha: 0.2},
          {value: 0, color: '#ffffff'}
        ]
      },
      series: [ // 序列（数据）
        {
          name: '疫情数据',
          type: 'map',
          mapType: 'china', // 自定义扩展图表类型
          label: {
            show: true
          },
          data: chinaData // 数据
        }
      ]
    }
    // 配置
    chinaChart.setOption(chinaOption)

    // 创建 echarts 实例
    const globalChart = echarts.init(this.echartsGlobalRef.current)
    // 配置选项
    const globalOption = {
      title: { // 标题
        text: '最新国际疫情地图',
        subtext: '数据来源于腾讯接口',
        sublink: 'https://view.inews.qq.com/g2/getOnsInfo?name=disease_foreign'
      },
      tooltip: { // 提示
        trigger: 'item',
        formatter: '{b}<br/>{c}'
      },
      visualMap: { // 视觉效果
        type: 'piecewise', // 分段型
        pieces: [ // 每一段的范围及样式
          {gte: 100000, color: '#991109'},
          {gte: 10000, lte: 99999, color: '#ff0000'},
          {gte: 1000, lte: 9999, color: '#ff0000', colorAlpha: 0.8},
          {gte: 100, lte: 999, color: '#ff0000', colorAlpha: 0.6},
          {gte: 10, lte: 99, color: '#ff0000', colorAlpha: 0.4},
          {gte: 1, lte: 9, color: '#ff0000', colorAlpha: 0.2},
          {value: 0, color: '#ffffff'}
        ]
      },
      series: [ // 序列（数据）
        {
          name: '疫情数据',
          type: 'map',
          mapType: 'world', // 自定义扩展图表类型
          data: globalData, // 数据
          nameMap: {
            'Canada': '加拿大',
            'Turkmenistan': '土库曼斯坦',
            'Saint Helena': '圣赫勒拿',
            'Lao PDR': '老挝',
            'Lithuania': '立陶宛',
            'Cambodia': '柬埔寨',
            'Ethiopia': '埃塞俄比亚',
            'Faeroe Is.': '法罗群岛',
            'Swaziland': '斯威士兰',
            'Palestine': '巴勒斯坦',
            'Belize': '伯利兹',
            'Argentina': '阿根廷',
            'Bolivia': '玻利维亚',
            'Cameroon': '喀麦隆',
            'Burkina Faso': '布基纳法索',
            'Aland': '奥兰群岛',
            'Bahrain': '巴林',
            'Saudi Arabia': '沙特阿拉伯',
            'Fr. Polynesia': '法属波利尼西亚',
            'Cape Verde': '佛得角',
            'W. Sahara': '西撒哈拉',
            'Slovenia': '斯洛文尼亚',
            'Guatemala': '危地马拉',
            'Guinea': '几内亚',
            'Dem. Rep. Congo': '刚果（金）',
            'Germany': '德国',
            'Spain': '西班牙',
            'Liberia': '利比里亚',
            'Netherlands': '荷兰',
            'Jamaica': '牙买加',
            'Solomon Is.': '所罗门群岛',
            'Oman': '阿曼',
            'Tanzania': '坦桑尼亚',
            'Costa Rica': '哥斯达黎加',
            'Isle of Man': '曼岛',
            'Gabon': '加蓬',
            'Niue': '纽埃',
            'Bahamas': '巴哈马',
            'New Zealand': '新西兰',
            'Yemen': '也门',
            'Jersey': '泽西岛',
            'Pakistan': '巴基斯坦',
            'Albania': '阿尔巴尼亚',
            'Samoa': '萨摩亚',
            'Czech Rep.': '捷克',
            'United Arab Emirates': '阿拉伯联合酋长国',
            'Guam': '关岛',
            'India': '印度',
            'Azerbaijan': '阿塞拜疆',
            'N. Mariana Is.': '北马里亚纳群岛',
            'Lesotho': '莱索托',
            'Kenya': '肯尼亚',
            'Belarus': '白俄罗斯',
            'Tajikistan': '塔吉克斯坦',
            'Turkey': '土耳其',
            'Afghanistan': '阿富汗',
            'Bangladesh': '孟加拉国',
            'Mauritania': '毛里塔尼亚',
            'Dem. Rep. Korea': '朝鲜',
            'Saint Lucia': '圣卢西亚',
            'Br. Indian Ocean Ter.': '英属印度洋领地',
            'Mongolia': '蒙古',
            'France': '法国',
            'Cura?ao': '库拉索岛',
            'S. Sudan': '南苏丹',
            'Rwanda': '卢旺达',
            'Slovakia': '斯洛伐克',
            'Somalia': '索马里',
            'Peru': '秘鲁',
            'Vanuatu': '瓦努阿图',
            'Norway': '挪威',
            'Malawi': '马拉维',
            'Benin': '贝宁',
            'St. Vin. and Gren.': '圣文森特和格林纳丁斯',
            'Korea': '韩国',
            'Singapore': '新加坡',
            'Montenegro': '黑山共和国',
            'Cayman Is.': '开曼群岛',
            'Togo': '多哥',
            'China': '中国',
            'Heard I. and McDonald Is.': '赫德岛和麦克唐纳群岛',
            'Armenia': '亚美尼亚',
            'Falkland Is.': '马尔维纳斯群岛（福克兰）',
            'Ukraine': '乌克兰',
            'Ghana': '加纳',
            'Tonga': '汤加',
            'Finland': '芬兰',
            'Libya': '利比亚',
            'Dominican Rep.': '多米尼加',
            'Indonesia': '印度尼西亚',
            'Mauritius': '毛里求斯',
            'Eq. Guinea': '赤道几内亚',
            'Sweden': '瑞典',
            'Vietnam': '越南',
            'Mali': '马里',
            'Russia': '俄罗斯',
            'Bulgaria': '保加利亚',
            'United States': '美国',
            'Romania': '罗马尼亚',
            'Angola': '安哥拉',
            'Chad': '乍得',
            'South Africa': '南非',
            'Fiji': '斐济',
            'Liechtenstein': '列支敦士登',
            'Malaysia': '马来西亚',
            'Austria': '奥地利',
            'Mozambique': '莫桑比克',
            'Uganda': '乌干达',
            'Japan': '日本',
            'Niger': '尼日尔',
            'Brazil': '巴西',
            'Kuwait': '科威特',
            'Panama': '巴拿马',
            'Guyana': '圭亚那',
            'Madagascar': '马达加斯加',
            'Luxembourg': '卢森堡',
            'American Samoa': '美属萨摩亚',
            'Andorra': '安道尔',
            'Ireland': '爱尔兰',
            'Italy': '意大利',
            'Nigeria': '尼日利亚',
            'Turks and Caicos Is.': '特克斯和凯科斯群岛',
            'Ecuador': '厄瓜多尔',
            'U.S. Virgin Is.': '美属维尔京群岛',
            'Brunei': '文莱',
            'Australia': '澳大利亚',
            'Iran': '伊朗',
            'Algeria': '阿尔及利亚',
            'El Salvador': '萨尔瓦多',
            "C?te d'Ivoire": '科特迪瓦',
            'Chile': '智利',
            'Puerto Rico': '波多黎各',
            'Belgium': '比利时',
            'Thailand': '泰国',
            'Haiti': '海地',
            'Iraq': '伊拉克',
            'S?o Tomé and Principe': '圣多美和普林西比',
            'Sierra Leone': '塞拉利昂',
            'Georgia': '格鲁吉亚',
            'Denmark': '丹麦',
            'Philippines': '菲律宾',
            'S. Geo. and S. Sandw. Is.': '南乔治亚岛和南桑威奇群岛',
            'Moldova': '摩尔多瓦',
            'Morocco': '摩洛哥',
            'Namibia': '纳米比亚',
            'Malta': '马耳他',
            'Guinea-Bissau': '几内亚比绍',
            'Kiribati': '基里巴斯',
            'Switzerland': '瑞士',
            'Grenada': '格林纳达',
            'Seychelles': '塞舌尔',
            'Portugal': '葡萄牙',
            'Estonia': '爱沙尼亚',
            'Uruguay': '乌拉圭',
            'Antigua and Barb.': '安提瓜和巴布达',
            'Lebanon': '黎巴嫩',
            'Uzbekistan': '乌兹别克斯坦',
            'Tunisia': '突尼斯',
            'Djibouti': '吉布提',
            'Greenland': '格陵兰',
            'Timor-Leste': '东帝汶',
            'Dominica': '多米尼克',
            'Colombia': '哥伦比亚',
            'Burundi': '布隆迪',
            'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
            'Cyprus': '塞浦路斯',
            'Barbados': '巴巴多斯',
            'Qatar': '卡塔尔',
            'Palau': '帕劳',
            'Bhutan': '不丹',
            'Sudan': '苏丹',
            'Nepal': '尼泊尔',
            'Micronesia': '密克罗尼西亚',
            'Bermuda': '百慕大',
            'Suriname': '苏里南',
            'Venezuela': '委内瑞拉',
            'Israel': '以色列',
            'St. Pierre and Miquelon': '圣皮埃尔和密克隆群岛',
            'Central African Rep.': '中非',
            'Iceland': '冰岛',
            'Zambia': '赞比亚',
            'Senegal': '塞内加尔',
            'Papua New Guinea': '巴布亚新几内亚',
            'Trinidad and Tobago': '特立尼达和多巴哥',
            'Zimbabwe': '津巴布韦',
            'Jordan': '约旦',
            'Gambia': '冈比亚',
            'Kazakhstan': '哈萨克斯坦',
            'Poland': '波兰',
            'Eritrea': '厄立特里亚',
            'Kyrgyzstan': '吉尔吉斯斯坦',
            'Montserrat': '蒙特塞拉特',
            'New Caledonia': '新喀里多尼亚',
            'Macedonia': '马其顿',
            'Paraguay': '巴拉圭',
            'Latvia': '拉脱维亚',
            'Hungary': '匈牙利',
            'Syria': '叙利亚',
            'Honduras': '洪都拉斯',
            'Myanmar': '缅甸',
            'Mexico': '墨西哥',
            'Egypt': '埃及',
            'Nicaragua': '尼加拉瓜',
            'Cuba': '古巴',
            'Serbia': '塞尔维亚',
            'Comoros': '科摩罗',
            'United Kingdom': '英国',
            'Fr. S. Antarctic Lands': '南极洲',
            'Congo': '刚果（布）',
            'Greece': '希腊',
            'Sri Lanka': '斯里兰卡',
            'Croatia': '克罗地亚',
            'Botswana': '博茨瓦纳',
            'Siachen Glacier': '锡亚琴冰川地区'
          }
        }
      ]
    }
    // 配置
    globalChart.setOption(globalOption)
  }

  render() {
    const {chinaTotal, chinaAdd} = this.state
    return (
      <div>
        <Tabs type="card">
          <Tabs.TabPane tab="国内" key="1">
            <div className="title-container" style={{marginBottom: '24px'}}>
              <div className="title" style={{fontSize: '18px', fontWeight: 700}}>国内疫情统计</div>
              <div className="subtitle">数据更新至 2021.01.28 09:00</div>
            </div>
            <Row gutter={16}>
              {
                Object.keys(dictionary).map(key => {
                  return (
                    <Col key={key} span={6} style={{textAlign: 'center', marginBottom: '24px'}}>
                      <Statistic title={dictionary[key]} value={chinaTotal[key]} valueStyle={{color: randomColor()}} />
                      <span style={{ marginTop: 16 }} type="primary">
                        昨日 <span style={{ color: '#ff0000'}}>{chinaAdd[key] > 0 ? '+' + chinaAdd[key] : chinaAdd[key]}</span>
                      </span>
                    </Col>
                  )
                })
              }
            </Row>

            <div ref={this.echartsChinaRef} style={{ width: '1000px', height: '800px' }}></div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="国际" key="2" forceRender>
            <div ref={this.echartsGlobalRef} style={{ width: '1000px', height: '800px' }}></div>
          </Tabs.TabPane>
          <Tabs.TabPane tab="实时新闻" key="3" forceRender>
            <List
              header={<div>最新疫情新闻</div>}
              footer={<div>Footer</div>}
              bordered
              dataSource={this.state.listData}
              renderItem={item => (
                <List.Item>
                  <Typography.Text mark>[{item.id}]</Typography.Text> {item.title} - {new Date(item.time).toISOString()}
                </List.Item>
              )}
            />
          </Tabs.TabPane>
        </Tabs>
      </div>
    )
  }
}
